<template>
  <div style="position: relative; display: flex">
    <div>
      <div
        style="
          position: absolute;
          z-index: 100;
          background-color: rgb(240, 242, 245);
          height: 60px;
          width: 45vw;
          display: flex;
          align-items: center;
        "
      >
        <svg-icon class-name="icon" icon-class="pdf02" />
        <div style="margin-left: 10px">
          <el-tooltip
            class="item"
            effect="dark"
            content="测试"
            placement="top"
            style="z-index: 101"
          >
            <p class="text-container">文件名字文件名字文件名字文件名字</p>
          </el-tooltip>
        </div>
        <div
          style="
            margin-left: auto;
            z-index: 101;
            cursor: pointer;
            display: flex;
            align-items: center;
          "
        >
          <svg-icon
            class-name="icon"
            icon-class="download02"
            style="margin: 0 10px 0 10px"
          />
          <p style="margin: 0 10px 0 10px; color: rgb(45, 149, 247)">
            识别当前页
          </p>
          <p style="margin: 0 10px 0 10px; color: rgb(45, 149, 247)">更改</p>
        </div>
      </div>
      <div style="height: 80vh">
        <!-- <iframe
            src="http://static.shanhuxueyuan.com/test.pdf"
            style="height: 100%; width: 45vw; border: none"
          /> -->
        <vue-office-pdf
          :src="pdf"
          style="height: 100vh; width: 45vw"
          @rendered="renderedHandler"
          @error="errorHandler"
        />
      </div>
    </div>
    <div style="z-index: 152; display: flex; margin: 20px">
      <div
        style="
          background-color: #39f;
          width: 4px;
          height: 20px;
          margin-right: 10px;
          border-radius: 3px;
        "
      ></div>
      <div>项目所属进项合同</div>
    </div>
  </div>
</template>

<script>
import VueOfficePdf from "@vue-office/pdf";
export default {
  components: {
    VueOfficePdf,
  },
  data() {
    return {
      pdf: "http://static.shanhuxueyuan.com/test.pdf",
      scale: 1, // 初始缩放比例
      pdfUrl: "",
    };
  },
  mounted() {
    // this.getTotal();
  },
  methods: {
    renderedHandler() {
      console.log("渲染完成");
    },
    errorHandler() {
      console.log("渲染失败");
    },
    renderedHandler() {
      console.log("渲染完成");
    },
    errorHandler() {
      console.log("渲染失败");
    },
    // 获取pdf总页数
    getTotal() {
      // 多页pdf的src中不能直接使用后端获取的pdf地址 否则会按页数请求多次数据
      // 需要使用下述方法的返回值作为url
      this.pdfUrl = pdf.createLoadingTask("获取到的pdf地址");
      // 获取页码
      this.pdfUrl.promise
        .then((pdf) => (this.pageTotal = pdf.numPages))
        .catch((error) => {});
    },
  },
};
</script>

<style scoped>
.text-container {
  max-width: 200px; /* 设置最大宽度 */
  white-space: nowrap; /* 不换行 */
  overflow: hidden; /* 超出部分隐藏 */
  text-overflow: ellipsis; /* 使用省略号表示超出部分 */
}
</style>
